<!--登录组件-->
<template>
	<div class="logon_down">		
		<div class="logon_down_k">
		<div class="logon_top">
			<span>登录</span>
			<em>手机验证登录  📱</em>
		</div>
		<div class="logon_input">
			<input class="userPhone" type="text" v-model="phone" placeholder="请输入手机号"/>
			<em>⚠ 手机号码不正确,请重新输入️</em>
			<input class="password" type="text" v-model='Password'  placeholder="密码"/>
			<textarea placeholder="验证码"></textarea>
			<a href="###">看不清换一张</a>
		</div>
			<!--登录注册-->
		<div class="userlogon">
			<div class="userlogon_min">
				<input type="checkbox" /><span>自动登录</span>
				<a href="javascript:;" @click="forget()">忘记密码?</a>
			</div>	
			<div class="userlogon_max">
				<button class="denglu"  @click="logon" >登录</button>
				<button @click="vip()" class="zhuce">会员注册</button>			
			</div>
			<p>提示：未注册用户将直接注册成为礼拜五用户 </p>
			<fieldset id="">
				<legend>用合作网站登录</legend>										
			</fieldset>			
		</div>
		<div class="work">
			<img src="../../assets/image/qq.jpg" alt="" />
			<img src="../../assets/image/wx.jpg" alt="" />
		</div>
	</div>
</div>
</template>

<script>
	export default{
		name:'Enter',
		data(){
			return{
				phone:"",
				Password:''
			}
		},
		methods:{
		forget:function(){
			window.location.href="#/Forget"
		},
		vip:function(){
			window.location.href='#/Vip'
		},
		//点击事件
		logon:function(){
			var pattern = /^[1][3,4,5,7,8][0-9]{9}$/;		
			if(this.Password==''){
				alert("密码不能为空")
				return;
			}
			//当手机号为空时		
			if(this.phone==""){
				alert("手机号不能为空")
				return;
			}else{
				//当手机号格式不正确时
				if(!pattern.test(this.phone)){			
					$(".logon_input em").show();	
					alert("请正确输入手机号")
					return;
				}else{
				var _this = this;
				this.axios.get('/api/login',{params:{
					username:_this.phone,
					password:_this.Password
				}}).then(function(data){
					if(data.data.err==2){
						alert("用户名不存在")
					}else if(data.data.err==1){
//					_this.$store.commit('phone',{phone:_this.phone})
						$(".placelogin").html(_this.phone)
						alert("登陆成功")
						window.location.href="#/FirstPage"
					}else{
						alert("密码错误")
					}
				})
				}
			}
		}
	}
}
	
</script>

<style scoped>
	.logon_down{
		position: relative;
	}
	.logon_down_k{
		width: 386px;
		height: 500px;
		background: white;
		border-left: 2px solid darkgray;	
		position: absolute;
		right: 253px;
		top: -505px;
	}
	.logon_down_k img{
		width: 100%;
	}
	.logon_top{
		width: 306px;
		height: 60px;	
		padding-left: 40px;
		padding-right: 40px;
	}
	.logon_top span{
		height: 60px;
		line-height: 60px;
		font-size: 22px;
	}
	.logon_top em{
		width: 15px;
		font-style: normal;
		padding-left: 132px;
		color: green;
	}
	/*登录页面输入框*/
	.logon_input{
		position: relative;
	}
	.logon_input input{
		width: 305px;
		height: 45px;		
		margin: auto;
		margin: 0px 38px 33px;
		font-size: 18px;
		text-indent: 2px;
		background: #f9f9f9;
		color: #b3b3b3;
		font-weight: 100;
	}
	.logon_input  textarea{
		width: 115px;
		height: 45px;
		line-height: 45px;
		border: 1px solid darkgray;
		margin-left: 38px;
		font-size: 18px;
		margin-right: 10px;
		background: #f9f9f9;
		color: #b3b3b3;
		font-weight: 100;
	}
	.logon_input a{
		width: 80px;
		height:34px;
		background: url(../../assets/image/yzm.jpg) no-repeat;
		background-size: 80px 34px;
		padding-left: 90px;
		vertical-align: 18px;
		color: #f4a140;
		font-weight: 100;
	}
	/*手机错误弹出的红色字体*/
	.logon_input em{
		font-style: normal;
		color: red;
		font-size: 14px;
		margin-left: 36px;
		position: absolute;
		top: 58px;
		left: 0;
		display: none;
	}
	/*登录注册*/
	/*小图标*/
	.userlogon_min{
		width: 342px;
		height: 18px;
		margin: auto;
		margin-top: 18px;
		margin-bottom: 18px;
	}
	.userlogon_min input{
		margin-left: 17px;
	}
	.userlogon_min a{
		margin-left: 166px;
		color: #f4a140;
		text-decoration: underline;
		font-weight: 100;
	}
	/*登录注册大图标*/
	.userlogon_max{
		width: 342px;
		height: 45px;
		margin: auto;
		margin-left: 37px;
	}
	.userlogon .denglu,.zhuce{
		width: 135px;
		height: 45px;
		font-size: 20px;	
		border-radius: 5px;	
		color: white;
		font-weight: 100;
	}
	.userlogon .denglu{
		background: #f08200;
		margin-right:50px;
	}
	.userlogon .zhuce{
		background: #498e3d;
	}
	/*小提示*/
	.userlogon p{
		margin: auto;
		text-align: center;
		margin-top: 10px;
		color: #a6a6a6;
		font-weight: 100;
	}
	/*合作网站*/
	fieldset{
		border: 0;
		display: block;
		width:260px;
		height: 20px;
		line-height: 20px;
		border-top:1px dashed rgba(160,123,123,0.3) ;
		padding: 0px 30px 0  30px;
		margin:10px auto;
	}
	legend{
		text-align: center;
		font-size: 18px;
		color: #797979;
	}
	.work{
		width: 342px;
		text-align: center;
	}
	.work img{
		width: 40px;
		height:40px;
		margin-right: -15px;
		margin-left: 27px;
	}
</style>